<template>
    <div class="cancelrecord">
        <div class="w100 haed bbg pr">
            <img class="fl hpd pa" @click="onClickLeft" style="height: 40rem;left: 20rem;top: 7rem;"
                src="../assets/img/back.png">
            <p class="fz37 cfff hpd tc">核销记录</p>
        </div>
        <div class="search-container from-mt pr">
            <input type="text" v-model="search" placeholder="输入需要搜索的内容">
            <button @click="onSearch"><i class="fa fa-search">
                    <img src="../assets/img/cancel/search.png" alt="">
                </i></button>
        </div>
        <div class="cancel-card pr" v-for="el in records" :key="el.id">
            <h2>{{ el.serviceItem }}</h2>
            <p>下单用户：{{ el.userName }}</p>
            <p>支付金额:{{ el.currentPrice }}</p>
            <p>核销时间:{{ onDate(el.modifyDate) }}</p>
        </div>
    </div>
</template>
<script>
import { countorder, order } from '../api/index'
import { Search } from 'vant';
import 'vant/lib/search/style';
export default {
    components: { Search },
    data() {
        return {
            value: '',
            search: '',
            records: {
                serviceItem: '',
                userName: '',
                currentPrice: '',
                modifyDate: ''
            }
        }
    },
    mounted() {
        order({ businessId: JSON.parse(localStorage.getItem('ID')) })
            .then(r => {
                this.records = r.data
            })
    },
    methods: {
        //修改日期格式
        onDate(r) {
            const date = new Date(r);
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const hours = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        onClickLeft() {
            this.$router.go(-1)
        },
        onSearch() {
            if (!this.search) {
                order({ businessId: JSON.parse(localStorage.getItem('ID')) })
                    .then(r => {
                        this.records = r.data
                    })
                this.$message({
                    message: '请输入搜索内容',
                    type: 'warning'
                });
            } else {
                order({ queryInfo: this.search, businessId: JSON.parse(localStorage.getItem('ID')) })
                    .then(r => {
                        this.records = r.data
                    })
            }
        }
    }
}
</script>
<style scoped>
.from-mt {
    margin-top: -275rem;
}

.from-mt /deep/ .van-search {
    background: none;
}

.cancelrecord {
    background-color: #f7f7f7;
    margin-bottom: 167rem;
}


/* 搜索 */
.search-container {
    height: 80rem;
    display: flex;
    align-items: center;
    border-radius: 50rem;
    background-color: #fff;
    margin: -275rem 40rem 30rem 40rem;
    box-shadow: 0px 0px 5rem rgba(0, 0, 0, 0.1);
    font-size: 22rem;
}

.search-container input[type="text"] {
    flex: 1;
    border: none;
    margin-left: 30rem;
}

.search-container input::placeholder {
    color: #C8C8C8;
}

.search-container button {
    border: none;
    background: transparent;
    cursor: pointer;
}

.search-container img {
    width: 25rem;
    height: 25rem;
    margin-right: 35rem;
}

.search-container button[type="submit"] i {
    font-size: 10rem;

}

.cancel-card {
    margin: 0 20rem 20rem 20rem;
    background-color: #fff;
    border-radius: 20rem;
    padding: 40rem 30rem;
}

.cancel-card h2 {
    font-size: 25rem;
    border-bottom: 7px solid #F7F7F7;
    padding-bottom: 20rem;
}

.cancel-card p:nth-child(2) {
    padding-top: 30rem;
}

.cancel-card p:nth-child(4) {
    color: #ADADAD;
    font-size: 21rem;
}

.cancel-card p {
    padding-bottom: 30rem;
    font-size: 22rem;
}
</style>